<template>
  <div>
    <div class="carousel">
      <div>
        <span>角色展示</span> <el-button title="增加角色" style="margin-left: 20px;" type="success" icon="el-icon-plus" circle @click="addRole()" />
      </div>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in roles" :key="item">
          <h3>{{ item }}<el-button style="margin-left: 20px;" type="primary" icon="el-icon-edit-outline" circle @click="updateRoleByName(item)" /></h3>
        </el-carousel-item>
      </el-carousel>
    </div>

  </div>
</template>

<script>
import userApi from '@/api/user'
export default {
  inject: ['reload'],
  data() {
    return {
      roles: [],
      loading: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      userApi.getAllRoles().then(resp => {
        this.loading = true
        if (resp.data.code === 200) {
          this.roles = resp.data.data.roles
        } else {
          this.$message.error('角色加载失败！')
        }
        this.loading = false
      }, err => {
        console.log(err)
        this.$message.error('网络错误！')
      })
    },
    addRole() {
      this.$prompt('您想增加的角色为：', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        userApi.addRole(value).then(resp => {
          resp.data.code === 200 ? this.$message.success('增加角色成功！') : this.$message.error('增加角色失败！')
        }, err => {
          console.log(err)
          this.$message.error('网络错误！')
        })
        this.initData()
        this.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    updateRoleByName(oldName) {
      this.$prompt('您想将其角色名修改为：', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        userApi.updateRoleByName(value, oldName).then(resp => {
          resp.data.code === 200 ? this.$message.success('角色修改成功！') : this.$message.error('角色修改失败！')
        }, err => {
          console.log(err)
          this.$message.error('网络错误！')
        })
        this.initData()
        this.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  }
}
</script>

<style scoped>
.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -100px;
}
.carousel span {
  display: inline-block;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 24px;
  font-family: 'Courier New', Courier, monospace;
}
.carousel >>> .el-carousel__container {
  width: 850px;
}
/*
.carousel .el-button {
  position: absolute;
  top: 45%;
  left: 55%;
  transform: translate(-50%,-50%);
} */

.el-carousel__item h3 {
    color: #475669;
    font-size: 24px;
    opacity: 0.75;
    line-height: 300px;
    text-align: center;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
